<template>
  <div>
    <el-card class="box-card">
      <mytitle :showLine="false">{{ $route.meta.title }}</mytitle>
      <div style="margin: 20px 0;">
        <el-cascader v-loading="loading1" v-model="valuse" @change="valusechange" :show-all-levels="false" 
          :options="options" @visible-change="selectChange" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
          clearable></el-cascader>
        <el-button type="success"  style="margin: 20px;" @click="addFarm">新增人员</el-button>
        <el-button type="warning"  style="margin: 20px;" @click="dialogFormVisible = true">新增部门</el-button>
      </div>
      <el-table v-loading="loading" ref="singleTable" :header-cell-style="{ color: '#292B2B', background: '#EAF9F4' }"
        :data="tableData" highlight-current-row @current-change="handleCurrentChange" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="名字" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" align="center">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="editRow(scope.row)" type="text" >编辑</el-button>
            <el-button @click="deletRow(scope.row)" type="text" style="color: red;" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination background @current-change="pageChange" :current-page.sync="info.pageNum"
          :page-size="info.pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="新增部门" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="departInfo" :rules="rules" ref="ruleForm">
        <el-form-item label="上级部门" label-width="120px" style="width: 320px;" prop="departmentId">
          <el-cascader v-loading="loading1" v-model="valuse2" @change="valusechange1" :show-all-levels="false"
             :options="options" @visible-change="selectChange"
            :props="{ checkStrictly: true, value: 'id', label: 'name' }" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="部门名称" label-width="120px" style="width: 320px;" prop="name">
          <el-input type="text"  v-model="departInfo.name" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button @click="dialogFormVisible = false" type="success"  plain>取消</el-button>
          <el-button @click="submitForm('ruleForm')" type="success" >确定</el-button>
         </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { findPcAccountByCondition, findUserdataByDepartmentId, removePcUserById ,addDepartment} from "../util/api.js"
export default {
  data() {
    return {
      dialogFormVisible: false,
      departInfo: {
        departmentId: "",
        name: ""
      },
      rules: {
            name: [
               { required: true, message: '请输入部门名称', trigger: 'blur' },
            ],
            departmentId:[
               { required: true, message: '请选择部门', trigger: 'change' }
            ]
         },
      info: {
        pageNum: 1,
        pageSize: 7,
        departmentId: "",
        name: "",
        phone: ""
      },
      loading1: false,
      loading: false,
      total: 0,
      valuse: [],
      valuse2: [],
      options: [],
      tableData: [],
      currentRow: null
    }
  },
  mounted() {
    this.getMembers()
  },
  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    async getMembers() {
      this.loading = true
      let res = await findPcAccountByCondition(this.info)
      // console.log(res)
      if (res.code != 200) return
      this.tableData = res.data.rows
      this.total = res.data.total
      this.loading = false
    },
    async getDepart() {
      this.loading1 = true
      let res = await findUserdataByDepartmentId({ departmentId: "1223456852" })
      // console.log(res)
      if (res.code != 200) return this.options = []
      this.options = res.data
      this.loading1 = false
    },
    selectChange(val) {
      if (val) this.getDepart()
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    pageChange(val) {
      this.info.pageNum = val
      this.getMembers()
    },
    editRow(row) {
      // console.log(row)
      this.$router.push({
        path: '/staffManagement/compile',
        query: {
          pcUserId: row.userId
        }
      })
    },
    deletRow(row) {
      this.$confirm('确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await removePcUserById({ userId: row.userId })
        if (res.code != 200) return
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getMembers()
      })
    },
    valusechange(val) {
      // console.log(val)
      if (val.length == 0) {
        this.info.departmentId = ""
      } else {
        this.info.departmentId = val[val.length - 1]
      }
      this.getMembers()
    },
    valusechange1(val) {
      if (val.length == 0) {
        this.departInfo.departmentId = ""
      } else {
        this.departInfo.departmentId = val[val.length - 1]
      }
    },
    //确认添加部门
    submitForm(formName) {
         this.$refs[formName].validate(async (valid) => {
            if (valid) {
               let res = await addDepartment(this.departInfo)
              //  console.log(res)
               if (res.code != 200) return
               this.$message.success('添加成功！')
               this.dialogFormVisible = false
            } else {
              //  console.log('error submit!!');
               return false;
            }
         });
      },
    addFarm() {
      this.$router.push({
        path: '/staffManagement/add'
      })
    },
  }
}
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
  margin: 14px 0;

  .pagination-box {
    width: 100%;
    padding: 20px;

    .el-pagination {
      text-align: right;
    }
  }
}
</style>